<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<style>
			#div01 {
				width: 50px;
				height: 50px;
				background-color: lightblue;
				position: absolute;
				top: 100px;
				left: 100px;
			}
		</style>
		</head>
		<body>
			<div id="div01">

			</div>
			<script>
				var moving = false;
				var posX;
				var posY;
				div01.onmousedown = function() {
					console.log("鼠标按下，准备开始移动")
					moving = true
					// 计算开始移动时 鼠标在块中的偏移位置
					posX = div01.offsetLeft - event.clientX;
					posY = div01.offsetTop - event.clientY;

				}
				div01.onmousemove = function() {
					if (moving) {
						div01.style.left = event.clientX + posX + "px";
						div01.style.top = event.clientY + posY + "px";
					}
				}
				div01.onmouseup = function() {
					moving = false;
				}
			</script>
		</body>
</html>
